<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台框架</title>

    <!-- 加载Bootstrap CSS 文件 -->
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="../assets/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../assets/css/common.css">
</head>
<body>
<div id="wrapper">
    <!-- 导航栏 navbar-fixed-top指定永远显示在头部-->
    <nav class="nav navbar-default navbar-fixed-top" role="navigation">

        <!-- 左上角 -->
        <div class="navbar-header">
            <a class="navbar-brand navbar-right" href="#">后台框架</a>
            <a href="#" class="navbar-brand">
                <img src="../assets/img/java_logo.png"
                     style="height: 50px; width: 50px; margin-top: -15px"/>
            </a>
        </div>

        <!-- 上边栏 -->
        <ul class="nav navbar-right top-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" date-target=".navbar-collapse"><i class="fa fa-user"></i> 未登录
                    <b class="caret"></b></a>
                <ul class="dropdown-menu navbar-collapse">
                    <li>
                        <a href="#"><i class="fa fa-fw fa-gear"></i> 个人设置</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#"><i class="fa fa-fw fa-power-off"></i> 退出登录</a>
                    </li>
                </ul>
            </li>
        </ul>

        <!-- 侧边栏 -->
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav side-nav">
                <li>
                    <a href="#"><span class="glyphicon glyphicon-headphones"></span> 首页</a>
                </li>
                <li>
                    <a href="#"><span class="glyphicon glyphicon-headphones"></span> 其他</a>
                </li>
                <li class="active">
                    <a href="#"><span class="glyphicon glyphicon-headphones"></span> 等等...</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- 导航栏结束 -->

    <!-- 业务逻辑的代码要写在page-wrapper里面: 使用时需要将下面的用户登录模块替换即可 -->
    <div id="page-wrapper">
        <!-- 标题 -->
        <div class="row">
            <div class="col-lg-5">
                <h1 class="page-header">用户登录</h1>
            </div>
        </div>

        <!-- 登录form -->
        <form class="form-horizontal">
            <!-- 用户名框框 -->
            <div class="form-group">
                <div class="col-md-5">
                    <input type="text" class="form-control" placeholder="用户名/Email">
                </div>
            </div>
            <!-- 密码框框 -->
            <div class="form-group">
                <div class="col-md-5">
                    <input type="password" class="form-control" placeholder="密码">
                </div>
            </div>

            <!-- 登录按钮 -->
            <div class="form-group">
                <div class="col-md-5">
                    <input type="submit" class="btn btn-primary">
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<!-- 加载jQuery -->
<script type="text/javascript" src="../assets/js/jquery.min.js"/>
<!-- 加载Bootstrap的js库 -->
<script type="text/javascript" src="../assets/js/bootstrap.min.js"/>
</html>